<template>
    <div class="totaldiv">

        <div class="headertitle">
            <div class="returnimg"><router-link to="/person"><img src="../../../static/img/myorder/return@2x.png" alt=""></router-link></div>
            <div class="ordertitle">会员名</div>
            <div></div>
        </div>

        <form @submit.prevent="submit">
            <div class="seconddiv">
                <p>
                    <span>
                        <span class="lefttitle">用户名字:</span> 
                        <span class="righttitle"><input type="text" style="border:none;margin-top: 14px;font-size: 15px;" placeholder="物有所享小物"> </span>
                    </span>
                    <span><img src="../../../static/img/set/Write@2x.png" alt=""></span>
                </p>
                <p style="font-size:11px;background-color: #EFEFF4; padding:15px 10px 15px 12px;">
                   若需要修改，请修改为最多有6个文字、字母或数字。请不要输入违规敏感名字或空白名字，若发现违规名字则作封号处理，谢谢合作。           
                </p>
                <p style="background-color:#EFEFF4;margin-top: 0.5rem">
                    <button class="btnsure" type="submit">确认修改</button>
                </p>
            </div>
        </form>

    </div>
</template>

<script>
export default {
    
}
</script>

<style lang="scss" scoped>
.totaldiv{
    flex-direction: column;
    justify-content: center;
    width: 24rem;
    background-color: #EFEFF4;
    .headertitle{
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 24rem;
        height: 3rem;
        background-color: #FFFFFF;
        margin-bottom: 0.5rem;
        .returnimg{
            padding-left: 2rem;
            img{
                height:18px;
                width:18px;
                margin-top:5px;
            }
        }
        .ordertitle{
            margin-right: 3.5rem;
        }
    }
    .seconddiv{
        background-color: #EFEFF4;
       p{
           height: 40px;
           display: flex;
           align-items: center;
           justify-content: space-between;
           background-color: #FFFFFF;
           padding-left: 1rem;
           padding-right: 1rem;
           margin-bottom: 0.5rem;
           span{               
               display: flex;
               align-items: center;
               img{
                   padding-top: 3px;
                   width: 16px;
                   height: 16px;
               }
           }
       }
    }
}
.lefttitle{
    color: #4f4f4f
}
.righttitle{
    color: black;
}
.clickimg{
    width: 6px;
    height: 10px;
}
.btnsure{
    width: 21rem;
    height: 50px;
    background-color: #3A3B3F;
    color: #FFFFFF;
    margin-top: 1rem;
    margin-left: 0.3rem;
}
</style>
